<template>
  <div>
    <div class="sumTop" style="margin-top: 130px; height: 42px">
      <div class="abt"><a href="" class="bt" translate="">全部商品分类</a></div>
      <div class="bbt">
        <ul class="ua">
          <li class="ula" v-for="item in typeaName" :key="item">
            <a href="" class="lia">{{ item }}</a>
          </li>
        </ul>
        <div
          class=""
          style="
            float: left;
            width: 1px;
            height: 13px;
            margin: 10px 0;
            background: #eee;
            overflow: hidden;
          "
        ></div>
        <ul class="ua">
          <li class="ula" v-for="item in typebName" :key="item">
            <a href="" class="lia">{{ item }}</a>
          </li>
        </ul>
        <div
          class=""
          style="
            float: left;
            width: 1px;
            height: 13px;
            margin: 10px 0;
            background: #eee;
            overflow: hidden;
          "
        ></div>
        <ul class="ua">
          <li class="ula" v-for="item in typecName" :key="item">
            <a href="" class="lia">{{ item }}</a>
          </li>
        </ul>
      </div>
      <div class="sp"></div>
    </div>
    <!-- 排序筛选 -->
    <div
      style="
        width: 80%;
        height: 42px;
        background-color: #eee;
        margin-top: 2px;
        margin: auto;
      "
    >
      <div style="padding-top: 5px; margin-left: 8px">
        <el-tag type="info" class="orderfilter"
          >综合<i class="el-icon-bottom"></i
        ></el-tag>
        <el-tag type="info" class="orderfilter"
          >销量<i class="el-icon-bottom"></i
        ></el-tag>
        <el-tag type="info" class="orderfilter"
          >评论数<i class="el-icon-bottom"></i
        ></el-tag>
        <el-tag type="info" class="orderfilter"
          >新品<i class="el-icon-bottom"></i
        ></el-tag>
        <el-tag type="info" class="orderfilter"
          >价格<i class="el-icon-bottom"></i
        ></el-tag>

        <span style="margin-left: 60%; font-size: 14px; color: #999"
          >共 <a style="color: black">1550</a> 件商品</span
        >
      </div>

      <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="综合" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="销量" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="评论数" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="新品" name="fourth"
          >定时任务补偿</el-tab-pane
        >
        <el-tab-pane label="价格" name="five"
          >价格</el-tab-pane
        >
      </el-tabs> -->
    </div>
    <!-- 内容部分 -->
    <el-card style="margin-left: 10%; width: 80%">
      <div style="margin-left: 10.5%">
        <el-card
          style="
            width: 230px;
            height: 322px;
            margin-top: 10px;
            float: left;
            overflow: hidden;
            margin-right: 8px;
          "
          v-for="shangpin in shangpinqun"
          :key="shangpin.id"
        >
          <router-link :to="'/datail/' + shangpin.id">
            <div
              class="commodityimg"
              style="width: 190px; height: 200px; padding-left: 5px"
            >
              <img
                :src="shangpin.shangpinimg"
                style="width: 100%; height: 100%"
              />
            </div>
            <div
              class="commodityname"
              style="
            margin-top:10px
              width: 190px;
              height: 48px;
              overflow: hidden;
              text-align: left;
              font-size: 14px;
              line-height: 16px;
            "
            >
              {{ shangpin.commodityname }}
            </div>
            <div class="commodityprice" style="width: 190px; height: 20px">
              <strong>
                <span style="font-size: 14px; color: red"> ￥ </span>
                <span style="font-size: 20px; color: red">
                  {{ shangpin.commodityprice }}
                </span>
              </strong>
            </div>
          </router-link>
        </el-card>
      </div>
    </el-card>
    <el-pagination style=""
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>

    <!-- <div></div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      typeaName: ["京东时尚", "美妆馆", "超市", "生鲜"],
      typebName: ["京东国际", "闪购", "拍卖"],
      typecName: ["金融"],
      sortTable: ["综合", "销量", "评论数", "新品", "价格"],
      shangpinqun: [
        {
          id: 1,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname:
            " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9,
        },
        {
          id: 2,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname:
            " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9,
        },
        {
          id: 3,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname:
            " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9,
        },
        {
          id: 4,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname:
            " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9,
        },
        {
          id: 5,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname:
            " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9,
        },
        {
          id: 6,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname:
            " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9,
        },
        {
          id: 7,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname:
            " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9,
        },
        {
          id: 8,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname:
            " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9,
        },
        {
          id: 9,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname:
            " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9,
        },
        {
          id: 10,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname:
            " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9,
        },
        {
          id: 11,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname:
            " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9,
        },
      ],
    };
  },
};
</script>

<style>
/* 排序筛选 */
.orderfilter:hover {
  border: 1px solid red;
  color: #f30213;
  cursor: pointer;
}
.el-icon-bottom {
  padding-left: 2px;
  font-weight: 700;
}

.ua {
  padding: 2px;
  margin-top: 1px;
  margin-left: 20px;
}
.ula {
  text-align: center;
  width: 65px;
  margin-left: 2px;
  height: 33px;
  float: left;
}
a {
  text-decoration: none;
}
.lia {
  font-weight: 700;
  color: black;
  font-size: 14px;
  line-height: 33px;
}
.lia:hover {
  color: #f30213;
}
ul {
  float: left;
  list-style: none;
}

.bbt {
  width: 800px;
  height: 33px;
  /* margin-left: 50px; */
  float: left;
  /* background-color: blueviolet */
}
.sp {
  background-color: red;
  width: 80%;
  margin-left: 10%;
  float: left;
  height: 1.7px;
}
.abt {
  float: left;
  /* #f30213 */
  background-color: #f30213;
  width: 190px;
  height: 28px;
  text-align: center;
  padding-top: 5px;
  margin-left: 10%;
  margin-bottom: 1px;
}
.bt {
  color: white;
  text-decoration: none;
  display: block;
  font-size: 15px;
}
</style>